<template>
  <div class="home">
    <el-container>
      <!-- 下半区域 -->
      <el-container class="layout-body">
        <!-- 下半区域的左侧 -->
        <el-aside class="layout-aside">
          <el-menu
              :default-active="$router.currentRoute.path"
              class="el-menu-vertical-demo"
              background-color="#425c79"
              text-color="#fff"
              router
              active-text-color="#ffd04b">
            <!--医生信息管理-->
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-star-on"></i>
                <span>医生信息管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/select/doctor">
                  <template slot="title">
                    <i class="el-icon-search"></i>
                    <span>医生信息查询</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="/admin/user/add-new">
                  <template slot="title">
                    <i class="el-icon-circle-plus-outline"></i>
                    <span>医生信息添加</span>
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--病床信息管理-->
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-star-on"></i>
                <span>病床信息管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/select/bed">
                  <template slot="title">
                    <i class="el-icon-search"></i>
                    <span>病床信息查询</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="">
                  <template slot="title">
                    <i class="el-icon-circle-plus-outline"></i>
                    <span>病床信息添加</span>
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--病人信息管理-->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-star-on"></i>
                <span>病人信息管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/select/patient">
                  <template slot="title">
                    <i class="el-icon-search"></i>
                    <span>病人信息查询</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="">
                  <template slot="title">
                    <i class="el-icon-circle-plus-outline"></i>
                    <span>病人信息添加</span>
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--收费信息管理-->
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-star-on"></i>
                <span>收费信息管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/feebasedcontent/FreeBasedView">
                  <template slot="title">
                    <i class="el-icon-search"></i>
                    <span>收费信息查询</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="">
                  <template slot="title">
                    <i class="el-icon-circle-plus-outline"></i>
                    <span>收费信息添加</span>
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--统计分析-->
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-star-on"></i>
                <span>统计分析</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/select/bedUseRatio">
                  <template slot="title">
                    <i class="el-icon-search"></i>
                    <span>病床利用率查询</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="/admin/select/chargeDetail">
                  <template slot="title">
                    <i class="el-icon-search"></i>
                    <span>收费明细查询</span>
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--系统管理-->
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-star-on"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="">
                  <template slot="title">
                    <i class="el-icon-edit"></i>
                    <span>修改密码</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="">
                  <template slot="title">
                    <i class="el-icon-circle-close"></i>
                    <span>退出登录</span>
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 下半区域的右侧 -->
        <el-main class="layout-main">
          <el-row>
            <div>
              <el-card style="margin: -30px 0">
                <span style="font-size: 26px;font-weight: bold;margin-right: 10px">首页通知 :</span>
                <span style="font-size: 20px;font-weight: bold;">
                  您有<span style="color: orangered">{{number}}</span>条未读消息，请及时查看
                </span>
              </el-card>
            </div>
          </el-row>

          <el-row>
            <div style="margin-top: 20px;width: 100%">
              <el-carousel height="600px">
                <el-carousel-item>
                  <img src="../assets/7.jpg" width="100%" height="100%">
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-row>

          <div>
            <el-card>
              <el-row><i class="el-icon-message-solid"></i></el-row>
              <el-card>
                <div style="margin-top: -15px;margin-left: -10px">
                  <span style="font-weight: bold;font-size: 18px">{{name}}</span><br>
                  <span style="color: lightsteelblue">{{content}}</span>
                </div>
              </el-card>
            </el-card>
          </div>
          <!-- 将由其它视图组件来显示 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return{
      number: 5 ,
      name:"王潇",
      content:"吹气球，吹个大气球！"
    }
  },
}
</script>
<style>

.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}
.layout-aside {
  background: #425c79;
}
.layout-aside i {
  color: #fff !important;
}
</style>

